import * as echarts from 'echarts'

const getLineChart = (data: any) => {
  let { seriesData, xAxisData, color, startColor, endColor, tooltipBgColor } = data
  return {
    grid: {
      left: 30,
      right: 20,
      top: 30, //拉伸距离顶部高度
      bottom: 0, //拉伸距离底部高度
      containLabel: true
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 数值居中还是居边
      data: xAxisData,
      axisTick: {
        // 刻度线
        show: false
      },
      axisLine: {
        onZero: false // 两边留白
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        //分割线
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        type: 'line',
        data: seriesData,
        symbolSize: 5, //拐点大小
        // smooth: true, //变平滑
        itemStyle: {
          color: color || 'auto', //拐点颜色
          borderColor: color || 'auto', //拐点边框颜色
          borderWidth: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: startColor || color
            },
            {
              offset: 1,
              color: endColor || 'rgba(255, 255, 255, 0)'
            }
          ])
        },
        emphasis: {
          scale: 1.8,
          itemStyle: {
            color: color,
            borderType: 'solid',
            borderWidth: 2,
            borderColor: '#FFFFFF'
          }
        },
        tooltip: {
          position: 'top',
          formatter: `当日访客量<br />{c}`,
          textStyle: {
            fontSize: 12,
            color: '#FFFFFF'
          },
          borderWidth: 0,
          backgroundColor: tooltipBgColor || '#4D5D72'
        }
      }
    ]
  } as echarts.EChartsOption
}

export { getLineChart }
